<script setup lang="ts" name="FormFieldsDrawer">
import FieldConstraintsAddEdit from './FieldConstraintsAddEdit.vue'
import FieldPropertyAddEdit from './FieldPropertyAddEdit.vue'
import FieldEnumValueAddEdit from './FieldEnumValueAddEdit.vue'
import usePublic from './hooks/usePublic'
import useDrawer from './hooks/useDrawer'
import useFieldConstraints from './hooks/useFieldConstraints'
import useFieldProperty from './hooks/useFieldProperty'
import useFieldEnumValue from './hooks/useFieldEnumValue'
import useSave from './hooks/useSave'

const FormFieldsRef = ref(null)
const FieldConstraintsAddEditRef = ref(null)
const FieldPropertyAddEditRef = ref(null)
const FieldEnumValueAddEditRef = ref(null)

const emit = defineEmits(['save'])

const { visible, formFieldsTypeList, form, editIndex } = usePublic()
const { showDrawer, cancel } = useDrawer(visible, form, formFieldsTypeList, FormFieldsRef)
const { addFieldConstraints, editFieldConstraints, deleteFieldConstraintsRow, fieldConstraintsChange } = useFieldConstraints(form, editIndex, FieldConstraintsAddEditRef)
const { addFieldEnumValue, editFieldEnumValue, deleteFieldEnumValueRow, fieldEnumValueChange } = useFieldEnumValue(form, editIndex, FieldEnumValueAddEditRef)
const { addFieldProperty, editFieldProperty, deleteFieldPropertyRow, fieldPropertyChange } = useFieldProperty(form, editIndex, FieldPropertyAddEditRef)
const { save } = useSave(emit, form, FormFieldsRef, cancel)

defineExpose({ showDrawer })
</script>

<template>
  <el-drawer class="form-fields-drawer" v-model="visible" direction="rtl" destroy-on-close size="580px" :before-close="cancel">
    <template #header>
      <h2>表单字段配置</h2>
    </template>
    <template #default>
      <el-form :model="form" label-width="auto" label-position="right" ref="FormFieldsRef" @submit.prevent>
        <el-form-item label="字段ID" prop="id" :rules="{ required: true, trigger: ['blur', 'change'], message: '字段ID不能为空' }">
          <el-input type="text" v-model="form.id" />
        </el-form-item>
        <el-form-item label="字段名称" prop="label" :rules="{ required: true, trigger: ['blur', 'change'], message: '字段名称不能为空' }">
          <el-input type="text" v-model="form.label" />
        </el-form-item>
        <el-form-item label="字段类型" prop="type" :rules="{ required: true, trigger: ['blur', 'change'], message: '字段类型不能为空' }">
          <el-select v-model="form.type">
            <el-option v-for="item in formFieldsTypeList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.type === 'custom'" label="自定义类型" prop="customType" :rules="{ required: true, trigger: ['blur', 'change'], message: '自定义类型不能为空' }">
          <el-input type="text" v-model="form.customType" />
        </el-form-item>
        <el-form-item label="默认值">
          <el-input type="text" v-model="form.defaultValue" />
        </el-form-item>
      </el-form>
      <div v-if="form.type === 'enum'" class="field-content">
        <el-divider>
          <div class="divider-panel">
            <svg-icon icon="ri:file-list-line"></svg-icon>
            <span>枚举值列表</span>
          </div>
        </el-divider>
        <el-table :data="form['value']" border>
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="id" label="枚举值编号" show-overflow-tooltip />
          <el-table-column prop="name" label="枚举值名称" show-overflow-tooltip />
          <el-table-column prop="operate" label="操作" width="110" align="center">
            <template #default="scope">
              <el-button type="primary" icon="Edit" circle @click="editFieldEnumValue(scope.row, scope.$index)"></el-button>
              <el-button type="danger" icon="Delete" circle @click="deleteFieldEnumValueRow(scope.$index)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button class="add" type="primary" icon="Plus" @click="addFieldEnumValue">添加枚举值</el-button>
      </div>
      <div class="field-content">
        <el-divider>
          <div class="divider-panel">
            <svg-icon icon="ri:braces-line"></svg-icon>
            <span>约束条件</span>
          </div>
        </el-divider>
        <el-table :data="form['constraint']" border>
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="name" label="约束名称" show-overflow-tooltip />
          <el-table-column prop="config" label="约束配置" show-overflow-tooltip />
          <el-table-column prop="operate" label="操作" width="110" align="center">
            <template #default="scope">
              <el-button type="primary" icon="Edit" circle @click="editFieldConstraints(scope.row, scope.$index)"></el-button>
              <el-button type="danger" icon="Delete" circle @click="deleteFieldConstraintsRow(scope.$index)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button class="add" type="primary" icon="Plus" @click="addFieldConstraints">添加约束条件</el-button>
      </div>
      <div class="field-content">
        <el-divider>
          <div class="divider-panel">
            <svg-icon icon="ri:list-ordered"></svg-icon>
            <span>字段属性列表</span>
          </div>
        </el-divider>
        <el-table :data="form['property']" border>
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="id" label="属性编号" show-overflow-tooltip />
          <el-table-column prop="value" label="属性值" show-overflow-tooltip />
          <el-table-column prop="operate" label="操作" width="110" align="center">
            <template #default="scope">
              <el-button type="primary" icon="Edit" circle @click="editFieldProperty(scope.row, scope.$index)"></el-button>
              <el-button type="danger" icon="Delete" circle @click="deleteFieldPropertyRow(scope.$index)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button class="add" type="primary" icon="Plus" @click="addFieldProperty">添加字段属性</el-button>
      </div>
      <FieldConstraintsAddEdit ref="FieldConstraintsAddEditRef" @save="fieldConstraintsChange"></FieldConstraintsAddEdit>
      <FieldPropertyAddEdit ref="FieldPropertyAddEditRef" @save="fieldPropertyChange"></FieldPropertyAddEdit>
      <FieldEnumValueAddEdit ref="FieldEnumValueAddEditRef" @save="fieldEnumValueChange"></FieldEnumValueAddEdit>
    </template>
    <template #footer>
      <div class="drawer-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped lang="scss">
.field-content {
  padding-right: 6px;

  .el-button.add {
    width: 100%;
    margin: 12px 0 0;
  }
}

.divider-panel {
  display: flex;
  align-items: center;

  span {
    margin-left: 6px;
  }
}
</style>
<style lang="scss">
.form-fields-drawer {

  .el-drawer__header {
    margin: 0;
    padding: 15px var(--el-space);
    border-bottom: 1px solid var(--el-border-color-extra-light);

    h2 {
      font-weight: bold;
      font-size: 14px;
    }
  }

  .el-drawer__body {
    position: relative;
    padding: calc(var(--el-space) - 8px) calc(var(--el-space) - 8px) calc(var(--el-space) - 8px) calc(var(--el-space) - 2px);
  }

  .el-drawer__footer {
    padding: 12px;
    border-top: 1px solid var(--el-border-color-extra-light);

    .drawer-footer {
      display: flex;

      .el-button {
        flex: 1;
        margin: 6px;
      }
    }
  }
}
</style>
